<template>
  <div v-if="dataSource && dataSource.length > 0">
    <h1 class="m-title mt15">精品推荐</h1>
    <div class="material-square">
      <div class="items">
        <div class="item pr" v-for="(item,index) in dataSource" :key="index">
          <nuxt-link :to="'/note/detail/'+item.id">
              <img class="cover mg-cover" :src="item.img" :alt="item.title">
              <div  style="padding:0px 10px 35px">
                <div class="entry-wrapper">
                  <span class="meta-category-dot" v-if="item.tags && item.tags.length > 0">
                    <template v-for="(tag,index) in item.tags.split(',')" :key="index">
                      <a href="javascript:void(0);">
                        <i class="dot"></i>{{tag}}
                      </a>
                    </template>
                  </span>
                </div>
                <div class="info mt5">
                  <div class="text_ellipsis_nowrap fw fz14">
                    <span>{{item.title}}</span>
                  </div>
                </div>
                <div class="desc text-ellipsis fz12 mt4" style="white-space:normal">{{item.description}}</div>
              </div>
              <div class="entry-footer">
                <div class="entry-meta">
                        <span class="meta-date">
                          <time>
                            <i class="iconfont icon-shijian pr tp2"></i><span class="ml3">{{ formatMsgTime(item.updateTime) }}</span>
                          </time>
                         </span>
                  <span class="meta-views ml10 pr tp2"><i class="iconfont icon-eye"></i><span class="ml2 pr ftp2">{{item.viewcount || 0}}</span></span>
                  <span class="meta-shhop-icon  pr tp1"><i class="iconfont icon-a-dagang1"></i><span class="ml2 pr ftp2">{{noteType[item.notetype]}}</span></span>
                </div>
              </div>
          </nuxt-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
const dataSource = ref([])
const noteType = ref({
  "1":"基础课",
  "2":"进阶课",
  "3":"面试课",
  "4":"实战课程"
})
const props = defineProps({
  channelId: {
    type: Number,
    default: 1
  }
})

const handleLoadData = async () => {
  const resp = await useLoadPushNoteApi({channelId: props.channelId, pageNo: 1, pageSize: 10})
  dataSource.value = resp.data.records
}

onMounted(() => {
  handleLoadData()
})
</script>